<template>
  <div>
    <el-form :model="vulForm" label-width="120px">
      <el-form-item label="漏洞名称：" prop="name_zh" required>
        <el-input v-model="vulForm.name_zh"/>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="影响组件：" prop="">
            <el-select filterable v-model="vulForm.webapp" placeholder="请选择" value-key="name"
                       style="width: 200px">
              <el-option v-for="item in productList" :key="item.id" :value="item" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="typeField" label="漏洞等级：">
            <el-select filterable v-model="vulForm.severity" placeholder="请选择" allowClear>
              <el-option v-for="item in vulLevel" :key="item.name" :value="item.name">{{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="typeField" label="漏洞类型：">
            <el-select filterable v-model="vulForm.category" placeholder="请选择" allowClear>
              <el-option v-for="item in vulType" :key="item.name" :value="item.name">{{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="cve" label="CVE编号：">
            <el-input v-model="vulForm.cve" placeholder="CVE-xxxx-xx"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="cnnvd" label="CNNVD编号：">
            <el-input v-model="vulForm.cnnvd" placeholder="请输入CNNVD编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="language" label="漏洞语言：">
            <el-select filterable v-model="vulForm.language" placeholder="请选择" allowClear>
              <el-option v-for="item in vulLanguage" :key="item.name" :value="item.name">{{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="2">
          <el-alert
              title="注意以下为富文本"
              type="success"
              description="复制粘贴来的文本先清除格式"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-form-item prop="description" label="描述：">
          <wang-editor :descriptionText="vulForm.description" @update:valueHtml="descriptionUpdate" ></wang-editor>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="suggestion" label="修复建议：">
          <wang-editor2 :messages="vulForm.suggestion" @update:valueHtml="suggestionUpdate" ></wang-editor2>
        </el-form-item>
      </el-row>
    </el-form>
      <span class="dialog-footer">
        <el-affix >
          <el-button type="primary" @click="saveVul">保存</el-button>
          <el-button @click="sendMessage('vulFlag',false)">取消</el-button>
        </el-affix>
      </span>
  </div>
</template>

<script>
import WangEditor from "@/components/wangEditor/index.vue";
import {createVul, getVulDetail, updateVul} from "@/api/my/loophole/vul";
import {ref, shallowRef} from "vue";
import WangEditor2 from "@/components/wangEditor/index2.vue";
import {ElMessage} from "element-plus";

export default {
  name: "vulInfo",
  components: {WangEditor2, WangEditor},
  emits: ['vulFlag'],
  props: {
    vulId: {
      type: Number,
      required: true
    },
  },
  data() {
    return {
      initVulForm: {},
      vulForm: {
        CreatedAt: '',
        DeletedAt: null,
        ForeignWebapp: null,
        UpdatedAt: '',
        category: '',
        cnnvd: '',
        cve: '',
        description: '',
        id: -1,
        language: '',
        name_zh: "",
        severity: '',
        suggestion: '',
        webapp: '',
      },
      vulType: [],
      productList: [],
      vulLevel: [],
      vulLanguage: [],
    }
  },
  created() {
    this.init()
    window.localStorage.removeItem('vulInfo')
  },
  mounted() {
    this.initVulForm = this.vulForm
    this.setBasic()
  },
  methods: {
    setBasic() {
      let vul = JSON.parse(window.localStorage.getItem("vul"))
      this.vulType = vul.VulType
      this.vulLevel = vul.VulLevel
      this.vulLanguage = vul.VulLanguage
      this.productList = JSON.parse(window.localStorage.getItem("productList"))
    },
    descriptionUpdate(newValue){
      this.vulForm.description = newValue
      // console.log(this.vulForm.description)
    },
    suggestionUpdate(newValue){
      this.vulForm.suggestion = newValue
      // console.log(this.vulForm.suggestion)
    },
    init(){
      console.log(this.vulId)
      this.vulForm = this.initVulForm
      if (this.vulId >= 0){
        //查看详情
        getVulDetail(this.vulId).then(res => {
          this.vulForm = res.data
          window.localStorage.setItem('vulInfo', JSON.stringify(this.vulForm))
          this.productList.forEach(item => {
            if (item.id == this.vulForm.webapp){
              this.vulForm.webapp = item
              return
            }
          })
        })
      } else {
        window.localStorage.removeItem('vulInfo')
      }
    },
    // 保存
    saveVul(){
      this.vulForm.webapp = this.vulForm.webapp==null?'':this.vulForm.webapp.id
      console.log(this.vulForm)
      if (this.vulForm.id == undefined){
        // 添加
        createVul(this.vulForm).then(resp => {
          if (resp.code == 0){
            ElMessage.success('添加成功！')
            this.sendMessage("vulFlag",false)
          } else {
            ElMessage.error(resp.msg)
          }
        })
      } else {
        updateVul(this.vulForm,this.vulForm.id).then(resp => {
          if (resp.code == 0){
            ElMessage.success('更新成功！')
            this.sendMessage("vulFlag",false)
          } else {
            ElMessage.error(resp.msg)
          }
        })
      }

    },
    sendMessage(target,msg) {
      this.$emit(target, msg);
    }
  },
}
</script>

<style scoped>

</style>